<template>
  <view> 
  <Tab :tabbar="2"></Tab>
		<view class="psxnavbar">
				<view class="psxcontent">
							<view class="psxtltimg" @click="gotoactivity">
								<view class="pppimg">
									<img src="../../static/psx/psx1.png" alt="">
								</view>
								<span>活动消息</span>
							</view>
							<view class="psxtltimg" @click="gotosquareNews">
								<view class="pppimg" style="background-color: #3FEB9F;">
									<img src="../../static/psx/psx2.png" alt="">
								</view>
								<span>广场消息</span>
							</view>
				</view>
		</view>
		<view class="psxchat" >
					<view class="psxvchat" v-for="(item,index) in list" :key="index" @click="chat(item)" >
						<view class="psxchatimg">
							<img :src="item.url" alt="">
						</view>
						<view class="psxrigchat">
							<span class='psxchat_name'>{{item.title}}</span>
							<span class='psxchat_success'>{{item.container}}</span>
							<span class='psxchat_content'>{{item.success}}</span>
						</view>
					</view>
				</view>
  </view>
</template>

<script>
	import Tab from '../../components/tab.vue'
	export default {
		data() {
			return {
				list:[]
			};
		},
		created() {
			this.$api.psxcontacts().then(res=>{
				this.list=res.data
			})
		},
		methods: {
			gotoactivity(){
				uni.navigateTo({
					url: '/pages/newss/activity'
				})
			},
			gotosquareNews(){
				uni.navigateTo({
					url: '/pages/newss/squareNews'
				})
			},
			chat(item){
				uni.navigateTo({
					url: `/pages/newss/details?title=${item.title}&img=${item.url}`
				})
			}
		},
		components:{
			Tab
		}
	}
</script>

<style scoped>
.psxnavbar{
	width: 100%;
	height: 208upx;
	background-color: #36DBAC;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
}
.psxcontent{
	width: 90%;
    height: 218upx;
    background-color: #fff;
    box-shadow: 0upx 0upx 30upx 4upx #ccc;
    margin: 0 auto;
    border-radius: 30upx;
	align-items: flex-end;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
}
.pppimg{
		margin: 0 auto;
		width: 140upx;
		height: 140upx;
		background-color: #29D2D1;
		border-radius: 50%;
}
.pppimg img{
	width: 80upx;
	margin-top: 24upx;
}
.psxtltimg{
	width: 200upx;
	height: 200upx;
	padding-bottom: 15upx;
	text-align: center;
	line-height: 60upx;
	font-size: 28upx;

}
.psxchat{
	width: 100%;
	height: 600upx;
	margin-top: 90upx;
}
.psxvchat{
	width: 100%;
	height: 200upx;
	border-bottom: 2upx solid #ccc;
	padding: 20upx;
	box-sizing: border-box;
}
.psxchatimg{
	width: 140upx;
	height: 140upx;
	border-radius: 50%;
	float: left;
	overflow: hidden;
	margin-left: 20upx;
}
.psxchatimg img{
	width: 140upx;
	height: 140upx;
}
.psxrigchat{
	width: 75%;
	height: 160upx;
	float: right;
	padding: 20upx;
	box-sizing: border-box;
}
.psxchat_name{
	float: left;
    width: 200upx;
    height: 50upx;
    font-weight: 700;
    line-height: 68upx
}
.psxchat_success{
	float: left;
	width: 200upx;
	height: 50upx;
	color: red;
	font-size: 20upx;
	line-height: 80upx;
}
.psxchat_content{
	width: 100%;
	height: 50upx;
	float: left;
	margin-top: 20upx;
	font-size: 24upx;
}
</style>